<template>
  <div class="case-progress">
    <div class="steps-container">
      <div v-for="(item, index) in caseProgress" :key="index">
        <a-steps
          :current="item.length"
          class="custom-steps"
          :style="{ width: item.length * 200 + 'px' }"
        >
          <!-- :style="getStepsStyle(item)" -->

          <a-step
            :title="childItem.eventProcessName"
            v-for="childItem in item"
            :key="childItem.id"
            :class="isShow(index, childItem)"
            :style="getStepStyle(item, index, childItem)"
          >
            <template #icon>
              <div class="icon-container">
                <a-icon type="check-circle" />
                <div class="line" v-if="isShowLine(index, childItem)"></div>
              </div>
            </template>
            <template #description>
              <div>{{ childItem.processUserName }}</div>
              <div>{{ childItem.createTime }}</div>
            </template>
          </a-step>
        </a-steps>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CaseProgress",
  data() {
    return {
      caseProgress: [],
      stepMinWidth: 200, // 每个步骤的最小宽度
      maxLength: 0,
    };
  },
  methods: {
    isShowLine(index, childItem) {
      if (
        this.caseProgress.length > 1 &&
        index < this.caseProgress.length - 1
      ) {
        if (childItem.eventStatus === 2 || childItem.eventStatus === 51) {
          return true;
        } else if (
          index > 0 &&
          index < this.caseProgress.length - 1 &&
          childItem.pqStatus === 4 &&
          childItem.eventStatus === 4
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    isShow(index, childItem) {
      let baseClass = "";

      // 添加状态相关的类
      if (childItem.eventProcessName === "处理完成") {
        baseClass += " status-complete";
      } else if (childItem.eventStatus === 2) {
        baseClass += " status-2";
      } else {
        baseClass += " status-normal";
      }

      if (index < 1) {
        return "custom-step" + baseClass;
      } else {
        if (
          childItem.eventStatus > 1 &&
          childItem.eventStatus < 51 &&
          childItem.eventStatus !== 6
        ) {
          return "custom-step" + baseClass;
        } else {
          return "isVisible" + baseClass;
        }
      }
    },
    isWidth(item, index, childItem) {
      if (item.length === this.maxlength) {
        return "100px";
      } else if (
        item.length < this.maxlength &&
        item.eventProcessName === "处理完成"
      ) {
        return (this.maxlength - item.length) * 100 + "px";
      }
      return "100px";
    },
    getCaseProgress(val) {
      const params = new URLSearchParams();
      params.append("eventId", val.id);

      this.$axios
        .post("/government-platform-center/case/getCaseStatus", params)
        .then((res) => {
          if (res.data.code === 0) {
            let resultData = res.data.data || [];
            // 使用Set来收集所有的processUserId
            const uniqueProcessUserIds = new Set(
              resultData.map((item) => item.processUserId)
            );

            // 计算不同的processUserId的数量
            const countOfUniqueProcessUserIds = uniqueProcessUserIds.size;
            if (countOfUniqueProcessUserIds > 2) {
              // 精细化派遣的数据
              let status2Data = resultData.filter(
                (item) => item.eventStatus === 2
              );
              // 过滤掉精细化派遣的多条数据
              let mainData = resultData.filter(
                (item) =>
                  item.processUserId === res.data.data[0].processUserId &&
                  item.eventStatus !== 2
              );
              mainData.splice(1, 0, status2Data[0]);
              let startData = mainData.slice(0, 2);
              let endData = mainData.slice(2);
              // 找出多部门的数据
              let multiData = resultData.filter(
                (item) => item.processUserId !== resultData[0].processUserId
              );
              // 根据多部门数据中的processUserId分组
              let multiDeptData = JSON.parse(JSON.stringify(multiData));
              // 使用reduce方法按processUserId对数据进行分组
              const groupedByUserId = multiDeptData.reduce((acc, current) => {
                const { processUserId } = current;
                acc[processUserId] = [...(acc[processUserId] || []), current];
                return acc;
              }, {});

              // 将结果转换为数组形式
              const resultArrays = Object.values(groupedByUserId);
              let maxLength = this.getMaxLength(resultArrays);

              let targetData = resultArrays.map((item, index) => {
                if (item.length < maxLength) {
                }
                return [...startData, ...item, ...endData];
              });
              this.caseProgress = targetData;
            } else {
              this.caseProgress = [resultData];
            }
            this.maxLength = 0;
            this.maxLength = this.getMaxLength(this.caseProgress);
            console.log(this.maxLength, "this.maxLength");
          }
        });
    },
    getMaxLength(val) {
      let maxLength = 0;
      for (let i = 0; i < val.length; i++) {
        if (val[i].length > maxLength) {
          maxLength = val[i].length;
        }
      }
      return maxLength;
    },
    getStepStyle(item, index, childItem) {
      if (item.length === this.maxLength) {
        return { width: "200px", flex: "0 0 200px" };
      } else if (
        item.length < this.maxLength &&
        childItem.eventProcessName === "处理完成"
      ) {
        let width = (this.maxLength - item.length + 1) * 214 + "px";
        console.log(width, "width");
        return { width: width, flex: `0 0 ${width}` };
      } else {
        return { width: "200px", flex: "0 0 200px" };
      }
    },
    // getStepsStyle(item) {
    //   // 计算总宽度，根据每个步骤的类型设置不同宽度
    //   let totalWidth = 0;

    //   for (const step of item) {
    //     if (step.eventProcessName === "处理完成") {
    //       totalWidth += 250; // 处理完成步骤宽度
    //     } else if (step.eventStatus === 2) {
    //       totalWidth += 300; // 精细化派遣步骤宽度
    //     } else {
    //       totalWidth += 180; // 普通步骤宽度
    //     }
    //   }

    //   return {
    //     width: totalWidth + 'px'
    //   };
    // },
  },
  watch: {
    "$route.query": {
      handler(val) {
        if (val.id) {
          this.getCaseProgress(val);
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="scss">
.case-progress {
  padding: 10px;
  width: 100%;

  // .ant-steps-item-tail {
  //   display: none !important;
  // }

  // .ant-steps-item-title::after {
  //   display: none !important;
  //   background-color: transparent !important;
  // }
}

.date-filter {
  margin-bottom: 15px;
  display: flex;
  align-items: center;

  .date-range {
    margin-left: 15px;
    color: #666;
  }
}

.steps-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px; // 为滚动条留出空间
  scrollbar-width: thin; // Firefox 滚动条样式
  scrollbar-color: #0052d9 #f0f2f5; // Firefox 滚动条颜色

  // Chrome、Safari 和 Edge 的滚动条样式
  &::-webkit-scrollbar {
    height: 8px; // 水平滚动条高度
    width: 8px; // 垂直滚动条宽度
  }

  &::-webkit-scrollbar-track {
    background: #f0f2f5; // 滚动条轨道颜色
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #0052d9; // 滚动条颜色
    border-radius: 4px;
  }
}

.isVisible {
  visibility: hidden !important;
}
.custom-steps {
  :deep(.ant-steps-item) {
    overflow: visible;

    // 根据步骤的不同状态设置不同宽度
    &.status-2 {
      width: 300px;
      flex: 0 0 300px;
    }

    &.status-complete {
      width: 250px;
      flex: 0 0 250px;
    }

    &.status-normal {
      width: 180px;
      flex: 0 0 180px;
    }
  }
}
.custom-step {
  visibility: visible !important;
  // &::v-deep {
  //   .ant-steps-item-title::after {
  //     background-color: transparent !important;
  //     display: none !important;
  //   }
  // }
}
.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  .line {
    width: 1px;
    height: 75px;
    background-color: #0052d9;
  }
}
.title-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .vertical-line {
    height: 1px;
    background-color: #0052d9;
  }
}
</style>
